<template>
  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
</template>

<script>
export default {
  name: "App",
  // mounted() {
  //   this.resize();
  //   window.addEventListener("resize", this.resize);
  // },
  // beforeDestroy() {
  //   window.removeEventListener("resize", this.resize);
  // },
  // methods: {
  //   resize() {
  //     /*
  //       100px -> x rem

  //       设计稿大小是：iphone6/7/8  375 * 667
  //         1rem = 1% = 3.75px
  //         xrem = 100px

  //         x = 100 / 3.75  -> 设计稿px大小 / 1rem的值
  //     */
  //     // 1rem 等于屏幕宽度 1%
  //     // html 字体大小等于屏幕宽度 1%
  //     const htmlEl = document.documentElement;
  //     const rem = htmlEl.clientWidth / 100;
  //     htmlEl.style.fontSize = rem + "px";
  //   },
  // },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

body {
  font-size: 16px;
}

.container {
  display: flex;
}

.box1 {
  /* width: 50rem; */
  width: 187.5px;
  height: 100px;
  background-color: pink;
}

.box2 {
  /* width: 50rem; */
  width: 187.5px;
  height: 100px;
  background-color: deeppink;
}
</style>
